<template>
  <span>
    <a-badge :count="count">
      <a-icon type="bell" class="ml-96" style="fontSize:20px" @click="dialog = true" />
    </a-badge>
    <a-modal v-model="dialog" :footer="null">
      <br />
      <a-list item-layout="vertical" :pagination="pagination" :data-source="listData">
        <a-list-item slot="renderItem" slot-scope="item" @click.native="native(item)">
          <div slot="extra">
            <p>{{ humanizeDate(item.pushTime) }}</p>
            <a-badge v-if="item.isRead == 2 ? true : false" :count="message" />
            <!-- <a-icon type="smile" /> -->
          </div>
          <a-list-item-meta :description="item.messageContent">
            <a slot="title">消息提醒</a>
            <div slot="avatar">
              <a-icon type="smile" />
            </div>
          </a-list-item-meta>
        </a-list-item>
      </a-list>
    </a-modal>
    <a-modal
      v-if="!!checking"
      :visible="!!checking"
      :title="`项目提醒  ${humanizeDate(checking.pushTime)}`"
      :mask="false"
      @cancel="cancel"
    >
      <p class="flex justify-end">
        <a-icon type="delete" two-tone-color="yarn" :style="{ fontSize: '20px' }" @click="del(checking.id)" />
      </p>
      <p>{{ checking.messageContent }}</p>
      <p>项目编号：{{ checking.projectNum }}</p>
      <p>项目地址：{{ checking.addr }}</p>
      <!-- <p>项目地址：{{ checking.id }}</p> -->
      <template slot="footer">
        <a-button type="primary" @click="cancel">
          取消
        </a-button>
        <a-button type="primary" @click="cancel">
          确定
        </a-button>
      </template>
    </a-modal>
  </span>
</template>
<script>
import moment from 'moment'
import { getNotice, updateNotice, deleteNotice } from '@/api/common'
export default {
  name: 'notice',
  components: {},
  props: [''],
  data() {
    return {
      dialog: false,
      listData: [],
      checking: null,
      count: '',
      message: '未读',
      pagination: {
        total: 1,
        pageSize: 5,
        onChange: this.getData
      }
    }
  },
  mounted() {
    this.init()
  },
  computed: {
    currentUser() {
      return this.$store.getters.userInfo
    },
    counts() {
      this.getData()
      return this.count == 0 ? '' : this.count
    }
  },
  methods: {
    init() {
      // setTimeout(() => {
      this.getData()
      // }, 30000)
    },
    async getData(page = 1) {
      const form = {
        // sysUserId: 21,
        sysUserId: this.currentUser.id,
        page,
        limit: this.pagination.pageSize
      }
      const res = await getNotice(form)
      const data = res.result.data
      this.pagination.total = data.total
      this.listData = data.list
      this.count = data.noReadCount
      this.count == 0 ? '' : this.count
      // this.id = data.list.id
    },
    humanizeDate(v) {
      if (v) {
        return moment(v * 1000).format('YYYY-MM-DD') || '--'
      } else {
        return '-'
      }
    },
    async native(item) {
      // this.show = true
      this.checking = item
      this.dialog = false
      if (item.isRead == 2) {
        const form = {
          isRead: 1,
          isPop: 1
        }
        await updateNotice(item.id, form)
      }
      this.getData()
    },
    cancel() {
      this.dialog = true
      this.checking = null
    },
    async del(id) {
      await deleteNotice(id)
      await this.getData()
      this.checking = null
      this.dialog = true
    }
  },
  created() {}
}
</script>
<style lang="css" scoped></style>
